<template>
  <div>
    <van-nav-bar left-text="返回" right-text="按钮" left-arrow />
    <van-search placeholder="请输入搜索关键词" />
    <van-tabs>
      <van-tab title="2019新款">
        <div class="shc_homelist">
          <div
            v-for="item in list"
            :key="item.productId"
            @click="jump(item.productId)"
          >
            <img :src="item.productImage" />
            <span>{{ item.productName }}</span>
            <p>
              <span>￥{{ item.salePrice }}</span>
              <span>已售0件</span>
            </p>
          </div>
        </div>
      </van-tab>
      <van-tab title="小绅士">小绅士</van-tab>
      <van-tab title="小公主">小公主</van-tab>
      <van-tab title="玩具">玩具</van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {//接收数据
    getlist() {
      this.$axios.get("/data.json").then((res) => {
        this.list = res.data.res;
        // console.log(this.list);
      });
    },
    jump(id) {//跳转详情页
      this.$router.push({ path: "/detail", query: { id: id } });
    },
  },
};
</script>
<style lang="scss">
.shc_homelist {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: rgb(214, 213, 211);
  div {
    width: 48%;
    margin: 3px 0;
    background-color: white;
    img {
      width: 100%;
    }
  }
  p {
    display: flex;
    justify-content: space-around;
    span {
      font-size: 15px;
    }
  }
}
</style>
